<template>
  <!--直播列表页-->
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <!--筛选、导入导出-->
      <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
        <a-form layout="inline">
          <a-form-item label="直播名">
            <a-input style="width: 250px" v-model="searchParams.liveName"></a-input>
          </a-form-item>
          <!--<a-form-item label="直播状态">-->
            <!--<a-select v-model="searchParams.liveType" allowClear>-->
              <!--<a-select-option value="">全部</a-select-option>-->
              <!--<a-select-option value="1">预告</a-select-option>-->
              <!--<a-select-option value="2">正在直播</a-select-option>-->
              <!--<a-select-option value="3">回放</a-select-option>-->
            <!--</a-select>-->
          <!--</a-form-item>-->
          <!--<a-form-item label="直播时间">-->
            <!--<a-range-picker-->
              <!--:defaultValue="[$util.moment(searchParams.bgTm),$util.moment(searchParams.endTm)]"-->
              <!--:format="$defaultSettings.dateFormat"-->
              <!--@change="onChange"/>-->
          <!--</a-form-item>-->
          <a-form-item>
            <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
          </a-form-item>

          <!--<a-form-item>-->
            <!--<a-button type="primary" icon="file" :loading="downloadLoading">导入</a-button>-->
          <!--</a-form-item>-->
          <!--<a-form-item>-->
            <!--<a-button type="primary" icon="download" :loading="downloadLoading">导出</a-button>-->
          <!--</a-form-item>-->
          <a-form-item>
            <!--新增-->
            <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!--列表-->
      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="pagination" :loading="loading"
               @change="getTableData"
      >
        <template slot="showType" slot-scope="text,record">
          <span v-if="text == '0'">公开</span>
          <span v-else>不公开</span>
        </template>
        <template slot="type" slot-scope="text,record">
          <a-tag color="green" v-if="text == '0'">
            上架
          </a-tag>
          <a-tag color="red" v-if="text == '1'">
            下架
          </a-tag>
        </template>

        <span slot="action" slot-scope="text, record">
          <template>
             <a v-if="record.type == 0" href="javascript:;" @click="updateForType(record,1)">下架</a>
             <a v-else href="javascript:;" @click="updateForType(record,0)">上架</a>
            <a-divider type="vertical"/>
            <a @click="handleUpdate(record)" href="javascript:;">编辑</a>
            <a-divider type="vertical"/>
            <a href="javascript:;" @click="showConfirm(record)">删除</a>
          </template>
        </span>
      </a-table>
      <!--新增/编辑弹窗-->
      <LivePopup :mdl="mdl" @handleSearch="handleSearch"></LivePopup>
    </a-card>
  </div>
</template>

<script>
  import moment from 'moment';
  import LivePopup from './livePopup'
  import {studyvideoupdateForType} from '@/api/invoice'
  import {livequery,liveupdateForType,liveDelete} from '@/api/courseManage/live'
  export default {
    components: {
      LivePopup
    },
    data() {
      return {

        /*   -------搜索框--------*/
        searchParams: {
//          bgTm: moment(new Date()).subtract(6, 'days').format('YYYY-MM-DD'),
//          endTm: this.$defaultSettings.endTm,
//          liveType: '',
          liveName: ''
        },

        /*   -------分页--------*/
        pagination: this.$defaultSettings.pagination ,

        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加'
          },
          visible: false,
          title: '',
          formData: {
            "createTime": "",
            "id": '',
            "integral": '',
            "liveFileName": "",
            "liveFileNo": "",
            "liveFilePath": "",
            "liveInfo": "",
            "liveName": "",
            "livePeriod": '',
            "liveTeacherInfo": "",
            "liveTeacherName": "",
            "liveTime": "",
            "picFileNo": "",
            "showType": 0,
            "userRelList": []
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          }
          ,
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          },
          formItemLayoutWithOutLabel: {
            wrapperCol: {
              xs: { span: 24, offset: 0 },
              sm: { span: 20, offset: 4 },
            },
          },
        },


        /*   -------表格--------*/
        loading: false,
        columns:[
          {
            title: '直播名',
            dataIndex: 'liveName'
          },
          {
            title: '是否公开',
            dataIndex: 'showType',
            scopedSlots: {customRender: 'showType'}
          },
          {
            title: '讲师名',
            dataIndex: 'liveTeacherName',
          },
          {
            title: '直播开始时间',
            dataIndex: 'liveTime',
          },
//          {
//            title: '直播结束时间',
//            dataIndex: 'endTm',
//          },
          {
            title: '直播时长',
            dataIndex: 'livePeriod',
          },
          {
            title: '浏览量',
            dataIndex: 'pageViews'
          },
          {
            title: '积分',
            dataIndex: 'integral'
          },
          {
            title: '学时',
            dataIndex: 'period'
          },
          {
            title: '直播状态',
            dataIndex: 'liveType',
          },
          {
            title: '上下架状态',
            dataIndex: 'type',
            scopedSlots: {customRender: 'type'}
          },
           {
             title: '操作',
             dataIndex: 'action',
             width: '150px',
             scopedSlots: {customRender: 'action'}
           }
        ],
        data:[],

        // 下载
        downloadLoading: false,
      }
    },
    inject: ['upShow'],
    filters: {

    },
    created() {
      this.getTableData(this.pagination)
    },

    watch: {

    },
    computed: {

    },
    methods: {
      moment,
      onChange(dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1]);
        this.searchParams.bgTm = dateStrings[0];
        this.searchParams.endTm = dateStrings[1];
      },
      getTableData(pagination) {
        if(pagination!=undefined && pagination!='' && pagination!=null) {
          this.pagination = pagination
        }
        this.loading = true
        const parameter = {
          _search: true,//是否分页查询
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1,
          id: '',
          bgTm: "",
          endTm: "",
          liveName: this.searchParams.liveName,
          liveTeacherName: "",
          liveType: '',
          type: ''
        }
        livequery(parameter).then(res => {
          this.loading = false
          this.pagination.total = res.data.total
          this.data = res.data.records
        }).catch(err => {
          this.loading = false
        })
      },
      handleSearch() {
        this.pagination.current = 1
        this.pagination.pageSize = 10
        this.getTableData(this.pagination)
      },
      setDefaults() {
        this.mdl.formData = {
          "createTime": "",
          "id": '',
          "integral": '',
          "liveFileName": "",
          "liveFileNo": "",
          "liveFilePath": "",
          "liveInfo": "",
          "liveName": "",
          "livePeriod": '',
          "liveTeacherInfo": "",
          "liveTeacherName": "",
          "liveTime": "",
          "picFileNo": "",
          "showType": 0,
          "userRelList": []
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true
      },
      //编辑当前行
      handleUpdate(row) {
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },
      //      删除
      showConfirm(val) {
        var that = this
        this.$confirm({
          title: '删除直播记录?',
          content: '确定删除'+val.liveName +'的记录?',
          onOk() {
            that.handleDelete(val)
          },
          onCancel() {},
        });
      },
      handleDelete(row){
        this.modalLoading = true
        liveDelete(row.id).then(res=>{
          if (res.code === 200) {
            this.modalLoading = false
            this.upShow(1, '删除成功')
            this.handleSearch()
          } else {
            this.modalLoading = false
            this.upShow(2, res.msg || '删除失败')
          }
        }).catch(err => {
          this.modalLoading = false
          this.upShow(2, '删除失败')
        })
      },
      //下载
      handleDownload() {
        this.downloadLoading = true
        let param  ={

        }
        /*refundRecorDdown(param).then(res=> {
          downloadFile(res,"退款记录","xlsx")
          this.downloadLoading = false
        })*/
      },
      //      上下架
      updateForType(row,type) {
        let parameter= {
          id: row.liveInfoId,
          type: type//        1:去下架;0:去上架
        }
        liveupdateForType(parameter).then(res => {
          if(res.code === 200) {
            this.upShow(1,res.msg || '操作成功')
            this.handleSearch()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.upShow(2)
        })
      }
    }
  }
</script>

<style scoped>

</style>